<template>
	<view>
		<c-status-bar />
		<c-page-header title="我的" :can-back="false"/>
		<unicloud-db v-slot="{data={},loading,error,options}" collection="uni-id-users"
		ref="myself"
		getone :where="`_id=='${uid}'`" field="username,avatar">
			<view v-if="error">{{error.message}}</view>
			<view v-else class="p-3 mt-2 flex justify-between">
				<!-- {{data}} -->
				<image :src="data.avatar" mode="aspectFill"
				class="avatar"
				></image>
				
				
				<view class="desc flex flex-column justify-between">
					<text class="h2">{{data.username|| 'loading'}}</text>
					
					<view class="flex  justify-between text-center mr-5 ">
						<view class="flex flex-column">
							<text class="h3">{{followNum}}</text>
							<text class="secondary-color">关注</text>
						</view>
						<view class="flex flex-column">
							<text class="h3">{{followNum}}</text>
							<text class="secondary-color">粉丝</text>
						</view>
					</view>
				</view>
			</view>
			
		</unicloud-db>
		
		<view class="iconfont m-5 flex align-center" v-for="v of actions" :key="v.type"
		@tap="go(v.type)"
		>
			<text :class="v.icon" class="mr-5 h3"></text>
			<text>{{v.desc}}</text>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			const {uid} = uniCloud.getCurrentUserInfo()
			return {
				uid:uid,
				fanNum:0,
				followNum:0,
				actions:[
					{
						type:"history",
						desc:"历史",
						icon:"icon-lishi"
					},
					// {
					// 	type:"collection",
					// 	desc:"收藏",
					// 	icon:"icon-shoucang1"
					// },
					{
						type:"love",
						desc:"资料完善",
						icon:"icon-like1"
					},
					{
						type:"setting",
						desc:"设置",
						icon:"icon-shezhi"
					},
				]
			}
		},
		onLoad(){
			this.count()
		},
		async onPullDownRefresh(){
			const request = new Promise(resolve => {
				this.$refs.myself.loadData({
					clear:true
				},resolve)
			})
			
			await Promise.all([
				request,
				this.count()
			])
			
			uni.stopPullDownRefresh()
		},
		methods: {
			go(type){
				uni.navigateTo({
					url:`/pages/${type}/${type}`
				})
			},
			count(){
				return Promise.all([
					this.countFansNum(),
					this.countFollowNum()
				])
			},
			async countFollowNum(){
				try{
					this.followNum = await this.$A.follow.countFollow({
						author:this.uid
					})
				}catch(e){
					console.log(e.message)
				}
			},
			async countFansNum(){
				try{
					this.fansNum = await this.$A.follow.countFans({
						author:this.uid
					})
				}catch(e){
					console.log(e.message)
				}
			}
		}
	}
</script>

<style >
	.avatar{
		width: 250rpx;
		height: 300rpx;
		border-radius: 10rpx 60rpx 60rpx 30rpx;
	}

	.desc{
		width: 350rpx;
	}
</style>
